// 底部导航组件

import React from 'react';
import { motion } from 'framer-motion';
import { FiEdit3, FiPlay, FiTrendingUp, FiSettings } from 'react-icons/fi';
import { useApp } from '../contexts/AppContext';

interface NavigationProps {
  currentView: 'input' | 'learning' | 'progress' | 'settings';
  onViewChange: (view: 'input' | 'learning' | 'progress' | 'settings') => void;
}

const Navigation: React.FC<NavigationProps> = ({ currentView, onViewChange }) => {
  const { state } = useApp();

  const navItems = [
    {
      id: 'input',
      label: '构建',
      icon: FiEdit3,
      description: '词汇构建',
      gradient: 'from-indigo-500 to-purple-600'
    },
    {
      id: 'learning',
      label: '场景',
      icon: FiPlay,
      description: '沉浸学习',
      disabled: !state.currentScene,
      gradient: 'from-purple-500 to-pink-600'
    },
    {
      id: 'progress',
      label: '成长',
      icon: FiTrendingUp,
      description: '学习轨迹',
      gradient: 'from-green-500 to-teal-600'
    },
    {
      id: 'settings',
      label: '偏好',
      icon: FiSettings,
      description: '个性设置',
      gradient: 'from-gray-500 to-slate-600'
    }
  ];

  return (
    <motion.nav 
      initial={{ y: 100, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ type: "spring", stiffness: 300, damping: 30 }}
      className="fixed bottom-0 left-0 right-0 z-50 safe-area-bottom"
    >
      {/* 现代毛玻璃背景 */}
      <div 
        className="mx-4 mb-4 rounded-3xl border border-white/20 shadow-2xl"
        style={{
          background: 'rgba(255, 255, 255, 0.1)',
          backdropFilter: 'blur(40px)',
          WebkitBackdropFilter: 'blur(40px)',
          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1)'
        }}
      >
        <div className="flex justify-around items-center px-2 py-3">
          {navItems.map((item, index) => {
            const Icon = item.icon;
            const isActive = currentView === item.id;
            const isDisabled = item.disabled;
            
            return (
              <motion.button
                key={item.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                whileTap={{ scale: 0.85 }}
                whileHover={{ scale: isDisabled ? 1 : 1.05, y: isActive ? 0 : -2 }}
                onClick={() => !isDisabled && onViewChange(item.id as any)}
                disabled={isDisabled}
                className={`
                  relative flex flex-col items-center px-4 py-2 rounded-2xl 
                  transition-all duration-300 ease-out group
                  ${isDisabled 
                    ? 'opacity-30 cursor-not-allowed grayscale' 
                    : 'opacity-100'
                  }
                `}
              >
                {/* 活跃状态背景 */}
                {isActive && (
                  <motion.div
                    layoutId="activeTab"
                    className={`absolute inset-0 bg-gradient-to-br ${item.gradient} rounded-2xl`}
                    style={{
                      boxShadow: '0 8px 32px -8px rgba(139, 92, 246, 0.4), 0 2px 8px -2px rgba(0, 0, 0, 0.1)'
                    }}
                    transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
                  />
                )}
                
                {/* 悬停效果 */}
                {!isActive && !isDisabled && (
                  <motion.div
                    className="absolute inset-0 bg-white/20 rounded-2xl opacity-0 group-hover:opacity-100"
                    transition={{ duration: 0.2 }}
                  />
                )}
                
                {/* 图标和文字 */}
                <div className="relative z-10 flex flex-col items-center">
                  <motion.div
                    animate={{ 
                      scale: isActive ? 1.1 : 1,
                      rotate: isActive ? [0, -5, 5, 0] : 0
                    }}
                    transition={{ duration: 0.3 }}
                  >
                    <Icon 
                      size={24} 
                      className={`mb-1 transition-colors duration-300 ${
                        isActive 
                          ? 'text-white drop-shadow-sm' 
                          : isDisabled 
                            ? 'text-gray-400' 
                            : 'text-gray-600 group-hover:text-gray-800'
                      }`} 
                    />
                  </motion.div>
                  
                  <span 
                    className={`text-xs font-bold tracking-wide transition-colors duration-300 ${
                      isActive 
                        ? 'text-white drop-shadow-sm' 
                        : isDisabled 
                          ? 'text-gray-400' 
                          : 'text-gray-600 group-hover:text-gray-800'
                    }`}
                  >
                    {item.label}
                  </span>
                </div>
              </motion.button>
            );
          })}
        </div>
      </div>
    </motion.nav>
  );
};

export default Navigation;